<!DOCTYPE html>
<!--头部公共部分-->
{include file="common/header" /}

<div  class="x-body" class="clear:both;">
    <div id="container" style="height: 300px;"></div>
    <div style="position: absolute; top: 10px; width: auto; height: 100px;">
        <div class="layui-form-item">
            <div class="layui-inline" >
                <label class="layui-form-label" style="width: auto;  color:#01AAED;font-weight: bold; font-size: 14px;">课消总金额:</label>
                <label class="layui-form-label label"  style="width: auto;  color:#01AAED; font-weight: bold; font-size: 14px;">{$elimination_amount}(千元)</label>
            </div>
        </div>
    </div>
    <div style="position: absolute; top: 40px; width: auto; height: 100px;">
        <div class="layui-form-item">
            <div class="layui-inline" >
                <label class="layui-form-label" style="width: auto;  color:#ef4136;font-weight: bold; font-size: 14px;">课消总课节:</label>
                <label class="layui-form-label label_sum"  style="width: auto;  color:#ef4136; font-weight: bold; font-size: 14px;">{$elimination_sum}(课时)</label>
            </div>
        </div>
    </div>
    <script>
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var data_course_elimination = eval('{$data_course_elimination}');
        var elimination_sum =[];
        var elimination_amount =[];
        var course_name =[];
        for(var i=0; i < data_course_elimination.length; i++){

            course_name[i] = data_course_elimination[i].course_name;
            elimination_sum[i] = data_course_elimination[i].elimination_sum;
            elimination_amount[i] = data_course_elimination[i].elimination_amount;

        }
        option = null;
        option = {

            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },

            legend: {
                right: 10,
                data: ['课消','总金额【千元】']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: course_name,
            },
            series: [
                {
                    name: '课消',
                    type: 'bar',
                    data:elimination_sum
                },
                {
                    name: '总金额【千元】',
                    type: 'bar',
                    data: elimination_amount
                }
            ]
        };
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    </script>

    <div  class="x-body" class="clear:both;" style="margin-top: 50px;">
        <div class="layui-row" style="border-left:1px solid #e5e5e5;border-right:1px solid #e5e5e5;">
            <div class="layui-form layui-col-md12 x-so layui-form-pane">
                <div class="layui-input-inline">
                    <select name="course_name" lay-search="" lay-verify="required">
                        <option selected value=""></option>
                        {foreach name="course" id="vo"}
                        <option value="{$vo.course_name}">{$vo.course_name}</option>
                        {/foreach}
                    </select>
                </div>
                <div class="layui-input-inline">
                    <input type="text" style="width: 180px;" name="date_range"  id="range_date" placeholder="选择日期范围" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <button class="layui-btn" id="search">
                        <i class="layui-icon layui-icon-search"></i>筛选</button>
                    <button class="layui-btn layui-btn-danger" id="clear">
                        <i class="layui-icon"></i>重置</button>

                </div>
            </div>
        </div>
        <table class="layui-hide" id="LAY_table_user" lay-filter="Event"></table>
        <script type="text/html" id="course_name">
            <a lay-event="elimination_info" class="layui-table-link">{{ d.course_name }}</a>
        </script>
    </div>

</div>

<!--底部公共部分-->
{include file="common/footer" /}

<script>
    layui.use(['form', 'element', 'table','laydate', 'layer', 'laytpl'], function () {
        var $ = layui.$,
            form = layui.form,
            table = layui.table,
            laydate = layui.laydate,
            element = layui.element,
            layer = layui.layer;

        var loading = layer.load();

        //数据表格 方法级渲染
        var tableIns = table.render({
            elem: '#LAY_table_user'
            , url: '{:url("elimination/eliminationcourselists")}?campus_id=' + '{$campus_id}'
            , method: 'POST'
            , toolbar: 'true' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , defaultToolbar: ['print', 'exports'] // 筛选图标
            , loading: true
            , parseData: function (res) { //res 即为原始返回的数据
                if (res.code === 1) {
                    res.code = 0;
                } else {
                    res.code = -1;
                }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.data //解析数据列表
                };
            },
            cols: [[
               {field: 'course_name', title: '课程', style:'cursor: pointer;color:#01AAED;font-weight: bold;', align: 'center',templet: '#course_name'
                },{field: 'elimination_sum', title: '课时',style:'font-weight: bold;',  align: 'center'
                },{field: 'elimination_amount', title: '课消金额(元)', style:'font-weight: bold;',  align: 'center'
                },{field: 'elimination_no_amount', title: '欠费课消金额(元)',style:'font-weight: bold;', align: 'center'
                },{field: 'elimination_all_amount', title: '总金额(元)',style:'font-weight: bold;',  align: 'center'
                }
            ]]
            , height: 'full-180'
            , page: true
            , title: '课消报表'
            , limits: [10,20,30,40,50,60,70,80,90,10000000]
            , done: function () {
                layer.close(loading);
            }
        });


        //监听工具条
        table.on('tool(Event)', function (obj) {
            var data = obj.data; //获得当前行数据

            var layEvent = obj.event; //获得 lay-event 对应的值
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            if(layEvent === 'elimination_info'){
                if(data.course_name === '合计'){
                    layer.msg('【合计】栏目不可选中');
                    return;
                }
                var start_date = '';
                var end_date = '';
                var create_date_rang = $('input[name=date_range]').val();
                if(create_date_rang.length > 0){
                    strs_date=create_date_rang.split("-"); //字符分割
                    start_date = strs_date[0]+'-'+strs_date[1]+'-'+strs_date[2];
                    end_date = strs_date[3]+'-'+strs_date[4]+'-'+strs_date[5];
                }
                layer.open({
                    skin: 'layui-layer-lan',
                    type: 2,
                    closeBtn: 2,
                    title: data.course_name+'(课消明细表)',
                    area: ['98%', '95%'],
                    shadeClose: false,
                    content: "{:url('elimination/elimination_report')}?course_id="+data.id + "&course_name=" + data.course_name + "&start_date=" + start_date + "&end_date=" + end_date + "&campus_id=" + '{$campus_id}',
                });
            }
        });


        //日期
        laydate.render({
            elem: '#range_date',
            range: true
            ,trigger: 'click'
        });

        //搜索项
        $('#search').click(function () {
            var field = {};
            field.course_name = $('select[name=course_name]').val();
            var create_date_rang = $('input[name=date_range]').val();
            if(create_date_rang.length > 0){
                strs_date=create_date_rang.split("-"); //字符分割
                field.start_date = strs_date[0]+'-'+strs_date[1]+'-'+strs_date[2];
                field.end_date = strs_date[3]+'-'+strs_date[4]+'-'+strs_date[5];
            }
            tableIns.reload({
                where: field,
                method: 'POST',
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });

            $.ajax({
                url: '/admin/Elimination/searcheliminationcourselists?campus_id=' + '{$campus_id}',
                method: "post",
                data: field,
                beforeSend: function () {
                    isLoad = layer.load(0, {
                        shade: false
                    }); //0代表加载的风格，支持0-2
                },
                success: function (result) {
                    //      layer.msg(result.msg);
                    if (result.code === 1) {

                        var course_json_data = eval('(' + result.data + ')');
                        console.log(course_json_data.course_elimination_json);
                        $('.label').text(course_json_data.course_elimination_amount +'(千元)');
                        $('.label_sum').text(course_json_data.course_elimination_sum+'(课时)');


                        var dom = document.getElementById("container");
                        var myChart = echarts.init(dom);
                        var data_course_elimination = course_json_data.course_elimination_json;
                        var elimination_sum =[];
                        var elimination_amount =[];
                        var course_name =[];
                        for(var i=0; i < data_course_elimination.length; i++){

                            course_name[i] = data_course_elimination[i].course_name;
                            elimination_sum[i] = data_course_elimination[i].elimination_sum;
                            elimination_amount[i] = data_course_elimination[i].elimination_amount;

                        }
                        option = null;
                        option = {

                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'shadow'
                                }
                            },

                            legend: {
                                right: 10,
                                data: ['课消','总金额【千元】']
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: {
                                type: 'value',
                                boundaryGap: [0, 0.01]
                            },
                            yAxis: {
                                type: 'category',
                                data: course_name,
                            },
                            series: [
                                {
                                    name: '课消',
                                    type: 'bar',
                                    data:elimination_sum
                                },
                                {
                                    name: '总金额【千元】',
                                    type: 'bar',
                                    data: elimination_amount
                                }
                            ]
                        };
                        if (option && typeof option === "object") {
                            myChart.setOption(option, true);
                        }

                    }

                },
                complete: function () {
                    layer.close(isLoad)
                },
                error: function (error) {
                    console.log(error)
                }
            });

        });


        //清除
        $('#clear').click(function () {
            $('.layui-form-pane').find('.layui-input-inline').each(function (index, element) {
                $(element).find('input[type=text]').val('');
                $(element).find('select').val('');
            })
            tableIns.reload({
                where: {
                    'course_name': '',
                    'start_date': '',
                    'end_date': '',
                    'date_range':'',
                },
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });


            $('.label').text('{$elimination_amount}' +'(千元)');
            $('.label_sum').text('{$elimination_sum}'+'(课时)');


            var dom = document.getElementById("container");
            var myChart = echarts.init(dom);
            var data_course_elimination = eval('{$data_course_elimination}');
            var elimination_sum =[];
            var elimination_amount =[];
            var course_name =[];
            for(var i=0; i < data_course_elimination.length; i++){

                course_name[i] = data_course_elimination[i].course_name;
                elimination_sum[i] = data_course_elimination[i].elimination_sum;
                elimination_amount[i] = data_course_elimination[i].elimination_amount;

            }
            option = null;
            option = {

                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },

                legend: {
                    right: 10,
                    data: ['课消','总金额【千元】']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    type: 'category',
                    data: course_name,
                },
                series: [
                    {
                        name: '课消',
                        type: 'bar',
                        data:elimination_sum
                    },
                    {
                        name: '总金额【千元】',
                        type: 'bar',
                        data: elimination_amount
                    }
                ]
            };
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
        });


    });
</script>

